<template>
	<view class="container icon-menu">
		<u-cell-group>
			<view @tap="toPage" data-url="/pageSetting/account/password"><u-cell-item title="修改密码"></u-cell-item></view>
		</u-cell-group>

		<view class="auth-tips">第三方账号绑定情况（{{ bindList.length }}）</view>
		<template>
			<block v-for="bind in bindList" :key="bind">
				<view class="bind-menu-item dis-flex b-f" v-if="bind == 1">
					<view class="menu-title flex-box dis-flex flex-y-center">微信</view>
					<view class="menu-sign flex-box dis-flex flex-x-end flex-y-center"><view class="unbind-auth" @tap.stop="unbindOauth" data-bind-type="1">解绑</view></view>
				</view>
				<view class="bind-menu-item dis-flex b-f" v-if="bind == 2">
					<view class="menu-title flex-box dis-flex flex-y-center">Sign In with Apple</view>
					<view class="menu-sign flex-box dis-flex flex-x-end flex-y-center"><view class="unbind-auth" @tap.stop="unbindOauth" data-bind-type="2">解绑</view></view>
				</view>
			</block>
		</template>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			bindList: []
		};
	},
	onShow() {
		this.getBindData();
	},
	methods: {
		getBindData() {
			this.$u.api.getThirdBindList().then(res => {
				this.bindList = res.data;
				console.log(res);
			});
		},
		unbindOauth(e) {
			uni.showModal({
				title: '提示',
				content: '绑定后将无法使用第三方快捷登陆哦！',
				confirmText: '解绑',
				success: result => {
					if (result.confirm) {
						this.$u.api.unbindThirdAuth(e.currentTarget.dataset.bindType).then(res => {
							this.$u.toast('解绑成功');
							this.getBindData();
						});
					}
				}
			});
			console.log(e);
		}
	}
};
</script>

<style lang="scss">
.bind-menu-item {
	height: 90rpx;
	padding: 0 20rpx 0 30rpx;
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	background: #fff;
}
.auth-tips {
	font-size: 26rpx;
	color: #777;
	line-height: 40rpx;
	padding: 4rpx 20rpx;
	margin: 20rpx auto 10rpx;
}

.unbind-auth {
	padding: 10rpx 20rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #999;
	border: 1rpx solid #ccc;
}
</style>
